<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>亿拼惠平台</title>
    <jsp:include page="include/header.jsp"></jsp:include>
     <style type="text/css">
			
		 	.wsd{
		 		width:50%;
		 	}
		 	.single-lines{
		 		padding: 6px 0px 6px 12px;
		 	}
		 	.tip th:NTH-OF-TYPE(2) {
	             color:#428bca;
             }
             .tip th:NTH-OF-TYPE(3) {
	            color: #c1c12b;
             }
             .tip th:NTH-OF-TYPE(4) {
	             color:#f9512c;
             }
	</style>
</head>
<body>
<div id="wrapper">
			<div class="col-lg-12">
				<h1 class="page-header">欢迎使用管理平台</h1>
			</div>
		<div class=" panel-default wsd">
			<h3>服务器状态</h3>
			<table class="table table-hover table-noellipsis table-bordered">
				<tr class="tip">
					<th>服务器</th>
					<th>良好</th>
					<th>延迟</th>
					<th>中断</th>
				</tr>
				<tr>
				<td>主站服务器</td>
					<td id="zhuzhan1"></td>
					<td id="zhuzhan2"></td>
					<td id="zhuzhan3"></td>
				</tr>
				<tr>
				<td>数据库服务器</td>
					<td id="shujv1"></td>
					<td id="shujv2"></td>
					<td id="shujv3"></td>
				</tr>
				<tr>
				<td>微信端服务器</td>
					<td id="Wx1"></td>
					<td id="Wx2"></td>
					<td id="Wx3"></td>
				</tr>
			</table>
		</div>
<div style="display:none">
		<div class="row title-top" >
			<label class="search-label">日期查询：</label>
				<input type="text" id="sBeginDate" value="" placeholder="年-月-日" class="form-control search-input width120 datetimepicker" data-format="yyyy-mm-dd" >
			<label class="search-label">至</label>
				<input type="text" id="sEndDate" value="" placeholder="年-月-日" class="form-control search-input width120 datetimepicker" data-format="yyyy-mm-dd" >
				<button class="btn btn-success search-btn" onclick="query();">确定</button>
				<button class="btn btn-success search-btn" onclick="reset();">重置</button>
		</div>
		<div class="row hidden">
					<div class="single-lines pull-left">共 <font color="#428bca" id="dataCount">0</font> 条记录</div>
					<button onclick="doExcel();"  class="btn btn-success pull-right">导出</button>
		</div>
			<div class=" panel panel-default title-top" style="display:none">
					<table id="dataTable" class="table table-hover table-noellipsis table-bordered">					
			            <thead>
			                <tr>	
			               	    <th>日期</th>		               		
								<th>日总销售额</th>
								<th>日交易单数</th>
								<th>日使用兑换码数</th>
								<th>未使用兑换码总量</th>
								<th>日浏览量</th>
								<th>日活跃量</th>
								<th>日新增会员数</th>
								<th>线下日交易单数</th>
								<th>线下日交易额</th>
			                </tr>
			            </thead>
			            <tbody id="dataList"></tbody>
			        </table>
				</div>
		        <div class="row">
		        	<div class="col-lg-12">
		        		<ul id="dataPagination" class="pagination-sm pull-right"></ul>
		        	</div>
		        </div>
</div>
</div>
<jsp:include page="include/javascripts.jsp"></jsp:include>
<script type="text/html" id="dataTpl">
	{{each list as item}}
	<tr id="item{{item.id}}" data-id="{{item.id}}">
		<td>{{item.RepDate}}</td>
		<td>{{item.daySale}}</td>
	    <td>{{item.dayorder}}</td>
		<td>{{item.daydui}}</td>
		<td>{{item.dayweidui}}</td>
        <td>{{item.daylook}}</td>
		<td>{{item.dayhuo}}</td>
		{{if item.usNum!=null}}
		<td>{{item.usNum}}</td>
		{{else}}<td>0</td>{{/if}}
		{{if item.ofNum!=null}}
		<td>{{item.ofNum}}</td>
		{{else}}<td>0</td>{{/if}}
		{{if item.ofSum!=null}}
		<td>{{item.ofSum}}</td>
		{{else}}<td>0</td>{{/if}}
	</tr>
	{{/each}}
</script>
<script type="text/javascript">


var dataPaginator;
$(query);
function query(){
	var beginDate=$("#sBeginDate").val(),endDate=$("#sEndDate").val();
	var params = {
		pageSize:10,
		beginDate:beginDate,
		endDate:endDate
	};
	if(dataPaginator){
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/page",params,function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
	});
	
}
function doExcel(){
	var beginDate=$("#sBeginDate").val(),endDate=$("#sEndDate").val();
	window.location.href="${BASE_PATH}/doExcel?beginDate="+beginDate+"&endDate="+endDate;
}
function reset(){
	$("#sBeginDate").val("");
	$("#sEndDate").val("");
}
$.ajax({
    url:"${BASE_PATH}/page",
    data:{account:$("#account").val()},
    type:'post',
    dataType:'json',
    success:function(data,textStatus,XMLHttpRequest){
    	if(XMLHttpRequest.status==200){
    		var tdobj = document.getElementById('shujv1');  
    		tdobj.innerText = "О";  
    		var tdobj = document.getElementById('Wx1');
    		tdobj.innerText = "О";  
    		var tdobj = document.getElementById('zhuzhan1'); 
    		tdobj.innerText = "О";  
    		
    	}
    	if(XMLHttpRequest.status==202){
    		
    		var tdobj = document.getElementById('shujv2');  
    		tdobj.innerText = "О";  
    		var tdobj = document.getElementById('Wx2');
    		tdobj.innerText = "О";  
    		var tdobj = document.getElementById('zhuzhan2'); 
    		tdobj.innerText = "О";  
    		
    	}
      if(XMLHttpRequest.status==403){
    		
    		var tdobj = document.getElementById('shujv3');  
    		tdobj.innerText = "О";  
    		var tdobj = document.getElementById('Wx3');
    		tdobj.innerText = "О";  
    		var tdobj = document.getElementById('zhuzhan3'); 
    		tdobj.innerText = "О";  
    		
    	}
    	
    },
    error: function(xhr,status,error){
       
    	//alert(status);
    }
});

</script>
</body>
</html>